<!DOCTYPE html><html><head><meta charset=utf-8><title>2-Dimensional Graphics Paths</title></head><body><h1> 2-Dimensional Graphics Paths</h1><p><a href='index.html'>Back to documentation index.</a></p><p><a id=Introduction></a></p>
<h2>Introduction</h2><p>This article describes two-dimensional paths. This is an extra included in the HTML 3D Library.</p>
<p><strong>Download the latest version of the Public Domain HTML 3D
Library at the <a href="https://github.com/peteroupc/html3dutil/releases">HTML 3D Library's Releases page</a>.</strong></p>
<p><a id=Contents></a></p>
<h2>Contents</h2><ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Contents">Contents</a></li>
<li><a href="#Paths">Paths</a></li>
<li><a href="#How_to_Use">How to Use</a></li>
<li><a href="#Creating_Paths">Creating Paths</a><ul>
<li><a href="#SVG_Path_String">SVG Path String</a></li>
<li><a href="#Building_Paths">Building Paths</a></li>
</ul>
</li>
<li><a href="#Path_Segments">Path Segments</a></li>
<li><a href="#Methods">Methods</a></li>
</ul>
<p><a id=Paths></a></p>
<h2>Paths</h2><p>A path is a collection of two-dimensional line segments and/or curves. Many paths describe
closed figures or connected strings of lines and curves. The <code>GraphicsPath</code> class
currently supports line segments, quadratic and cubic B&eacute;zier curves, and elliptical arcs,
as well as closed figures made from several path segments.</p>
<p><a id=How_to_Use></a></p>
<h2>How to Use</h2><p>2D paths are implemented in a class called <a href="H3DU.GraphicsPath.html"><code>H3DU.GraphicsPath</code></a>, found in the file <em>extras/path.js</em> in
the HTML 3D Library download.  To use this class, you must include the script &quot;extras/path.js&quot;,
as in this example.</p>
<pre class="prettyprint source"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;h3du_min.js&quot;>&lt;/script>
&lt;script type=&quot;text/javascript&quot; src=&quot;extras/path.js&quot;>&lt;/script></code></pre><p><a id=Creating_Paths></a></p>
<h2>Creating Paths</h2><p>There are two ways to create paths: using an SVG path string, or by calling methods that add
its segments.</p>
<p><a id=SVG_Path_String></a></p>
<h3>SVG Path String</h3><p>If you've worked with SVG, you may be familiar with this format for describing 2D paths. An
SVG path string consists of one or more path commands that start with a single letter.
The following are examples of SVG path strings:</p>
<pre class="prettyprint source"><code>M50,50L100,100,100,150,150,200

M50,20C230,245,233,44,22,44

M50,50H80V60H50V70H50</code></pre><p>The &quot;M&quot; command moves the current position, the &quot;L&quot;, &quot;H&quot;, and &quot;V&quot; commands create
lines, the &quot;Q&quot;, &quot;C&quot;, &quot;S&quot;, and &quot;T&quot; commands create B&eacute;zier curves, the &quot;A&quot; command
creates elliptical arcs, and the &quot;Z&quot; command closes the path. If the letters are
lower-cased, X and Y coordinates are relative to the current position.</p>
<p>For more information, see the H3DU.GraphicsPath.fromString method documentation.
That method is also how you create a 2D path from an SVG path string, as in this
example:</p>
<pre class="prettyprint source"><code>var path = H3DU.GraphicsPath.fromString(&quot;M50,20C230,245,233,44,22,44&quot;)</code></pre><p><a id=Building_Paths></a></p>
<h3>Building Paths</h3><p>The other way to make paths is to call the <code>H3DU.GraphicsPath</code> constructor and call methods
to add path segments to the path.</p>
<p>The <code>H3DU.GraphicsPath</code> object stores a current position and a starting position, and many methods
don't have you specify a starting position, to cover the common case of drawing a series
of connected lines and curves.</p>
<ul>
<li><em>.moveTo(x, y)</em> - Moves the starting position and current position.</li>
<li><em>.lineTo(x, y)</em> - Adds a line segment from the current position to a new ending position.</li>
<li><em>.closePath()</em> - Closes the path by drawing a line to the starting point, if needed.</li>
</ul>
<p><a id=Path_Segments></a></p>
<h2>Path Segments</h2><p>Each path can include a number of line segments, B&eacute;zier curves, and elliptical arcs.
Line segments are relatively easy to understand. The other two kinds of segments
deserve some discussion.</p>
<p>A <em>B&eacute;zier curve</em> is a parametric curve based on a polynomial formula. In this kind of
curve the endpoints are defined as they are, but the other points define
the shape of the curve and generally don't cross the curve.
A quadratic B&eacute;zier curve uses 3 points. A cubic B&eacute;zier
curve uses 4 points.</p>
<p>An <em>elliptic arc</em> is a curve which forms part of an ellipse. There are several ways to
parameterize an elliptic arc, as seen in the <em>.arc()</em>, <em>.arcTo()</em>, and <em>.arcSvgTo()</em> methods
of the <code>H3DU.GraphicsPath</code> class.</p>
<p><a id=Methods></a></p>
<h2>Methods</h2><ul>
<li>The H3DU.GraphicsPath.getLength method finds the approximate length of a path.</li>
<li>The H3DU.GraphicsPath.getBounds method finds the axis-aligned bounding box of a path.</li>
</ul><p><a href='index.html'>Back to documentation index.</a></p></body></html>
